<template>
  <div class = "big_bg">
    <div style = "height: 10px;width: 100%"></div>
    <div class = "head_top">
      <div @click = "toRouter('index')" style = "width: 800px;height: 60px;margin: auto;cursor:pointer"></div>
      <img :src = "require('@/assets/退出.png')" class="out" alt = "退出" title = "退出" @click = "onOut">
    </div>
    <div class = "nav">
      <div @click = "toRouter('daily')" class = "nav_left">日常运维管理</div>
      <div @click = "toRouter('comprehensive')" class = "nav_left">库存备件管理</div>
      <div @click = "toRouter('warning')" class = "nav_left nav_jiange_left">预警分析管理</div>
      <div @click = "toRouter('knowledge')" class = "nav_right nav_jiange_right">知识库管理</div>
      <div @click = "toRouter('multidata')" class = "nav_right">综合资料管理</div>
      <div @click = "toRouter('management')" class = "nav_right">系统管理</div>

    </div>
    <div class = "main">
      <div :style = "{width:isBtnLeft?'0px':'490px'}" style = "z-index: 1;position: absolute;top: 90px;left: 0px;bottom: 0;box-shadow: 2px 2px 5px #000;background: rgba(0, 0, 0, 0.2);">
        <div class = "btn_left" @click = "onLeft">
          <template v-if = "isBtnLeft">></template>
          <template v-else><</template>
        </div>
        <div class = "main_left" v-show = "!isBtnLeft">
          <div class = "top_1">
            <div class = "day_box">
              <div class = "arrows"></div>
              <div class = "sb_title">监测<b>企业</b>数量</div>
              <div class = "sb_number">
                <a-popover title = "监测点状态" >
                  <template slot = "content">
                    <div style="display: flex">
                      <template v-for="item of errorList.values()">
                        <p style="margin:0 5px;font-size: 18px;font-weight: bold" :style = "{color:item.color }">{{item.code}}:{{item.count}}</p>
                      </template>
                    </div>

                  </template>
                  <h3 style = "cursor: pointer;">{{ monitorStatus }}</h3>
                </a-popover>
              </div>
            </div>
            <div class = "area_box">
              <div class = "arrows"></div>
              <div class = "sb_title">未处理<b>异常</b>数量</div>
              <div class = "sb_number">
                <a-popover title = "未处理异常" v-if="handleCount.isShow">
                  <template slot = "content">
                    <div style="display: flex">
                      <template v-for="item in handleCount.list">
                        <p style="margin:0 5px;font-size: 18px;font-weight: bold" :style = "{color:item.color }">{{item.name}}:{{item.count}}</p>
                      </template>
                    </div>

                  </template>
                  <h3 style = "cursor: pointer;color: #ff6c36">{{ handleCount.count }}</h3>
                </a-popover>
              </div>
            </div>
          </div>
          <div class = "top_2">
            <div class = "day_box">
              <div class = "arrows"></div>
              <div class = "sb_title"><b>预警</b>提醒分析</div>
            </div>
          </div>
          <div style = "display: grid" v-if="false">
            <div class = "yj_tx">
              <span id = "title_zc">正常运行</span>
              <span id = "title_ts">提示异常</span>
              <span id = "title_gz">故障暂停</span>
            </div>
            <div style = "display: flex" v-if = "equipmentAbnormal.a">
              <Gauge :listData = "equipmentAbnormal.n"></Gauge>
              <Gauge1 :listData = "equipmentAbnormal.b"></Gauge1>
              <Gauge2 :listData = "equipmentAbnormal.d"></Gauge2>
            </div>
          </div>
          <div>
            <Lines :listData = "recentDataStatistics" v-if = "isRecentDataStatistics"></Lines>
          </div>
          <div class = "top_3">
            <div class = "day_box">
              <div class = "arrows"></div>
              <div class = "sb_title"><b>巡检</b>情况</div>
            </div>
            <div class = "div_progress" v-if = "isQuantumPo">
              <a-progress stroke-linecap = "square" :stroke-color = "{
                        '0%': '#0e4a62',
                        '100%': '#367e73',
                      }" :percent = "quantumPo.doneProportion" />
              <div class = "progress-text-box">
                <div class = "progress-left">
                  <span v-html = "'已完成'+quantumPo.done"></span>
                  <h3 v-html = "quantumPo.doneProportion+'%'"></h3>
                </div>
                <div class = "progress-right">
                  <span v-html = "'未完成'+quantumPo.notDone"></span>
                  <h3 v-html = "quantumPo.notDoneProportion+'%'"></h3>
                </div>
              </div>
            </div>
          </div>
          <div class = "line-cate">
            <lineCate :listData = "[mileageDay.day,mileageDay.month]"></lineCate>
            <div class = "line-cate-box">
              <div><span>{{ mileageDay.currentDayMileage }}</span>
                <template v-if = "mileageDay.day>0">
                                    <span class = "line-color-up">{{ Math.abs(mileageDay.day) }}%<img
                                        style = "margin-bottom: 5px;margin-left: 5px;" src = "@/assets/big/up.png"
                                        alt = ""> </span>
                </template>
                <template v-else>
                                    <span class = "line-color-down">{{ Math.abs(mileageDay.day) }}%<img
                                        style = "margin-bottom: 5px;margin-left: 5px;" src = "@/assets/big/down.png"
                                        alt = ""> </span>
                </template>

              </div>
              <div><span>{{ mileageDay.currentMonthMileage }}</span>
                <template v-if = "mileageDay.month>0">
                                    <span class = "line-color-up">{{ Math.abs(mileageDay.month) }}%<img
                                        style = "margin-bottom: 5px;margin-left: 5px;" src = "@/assets/big/up.png"
                                        alt = ""></span>
                </template>
                <template v-else>
                                    <span class = "line-color-down">{{ Math.abs(mileageDay.month) }}%<img
                                        style = "margin-bottom: 5px;margin-left: 5px;" src = "@/assets/big/down.png"
                                        alt = ""></span>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class = "main_content">
        <div class = "map">
          <el-amap :amap-manager = "amapManager" :mapStyle="mapStyle" :events = "events" :center = "center" :zoom = "zoom" :vid = "'amap-vue'"></el-amap>
          <div class = "widow-box" ref = "infoWindow" v-show = "isinfoWindow">
            <h3 class = "h3">排口基本信息
              <a-icon class = "guanbiicon" type = "close-circle" @click = "closeInfoWindow" />
            </h3>
            <ul>
              <li class = "single">
                <p class = "single-title">企业名称:</p>
                <p class = "single-cent">{{ details.companyName }}</p>
              </li>
              <li class = "single">
                <p class = "single-title">排口名称:</p>
                <p class = "single-cent">{{ details.monitorName }}</p>
              </li>
              <li class = "single">
                <p class = "single-title">创建时间:</p>
                <p class = "single-cent">{{ details.modifyTime }}</p>
              </li>
              <li class = "single" v-for = "(v,i) in details.equipmentAbnormalInfoList" :key = "i">
                <p class = "single-title">{{ v.monitorFactorsName }}:</p>
                <p class = "single-cent">{{ v.realValue }}({{ v.unit ? v.unit : "-" }})</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div :style = "{width:isBtnRight?isRightWidth:isRightDefault}"
           style = "z-index: 1;position: absolute;top: 90px;right: 0px;bottom: 0;box-shadow: -2px 2px 5px  #000;background: rgba(0, 0, 0, 0.2);">
        <div class = "btn_right" @click = "onRight()">
          <template v-if = "isBtnRight">
            <
          </template>
          <template v-else>
            >
          </template>
        </div>
        <div class = "main_right" v-show = "!isBtnRight">
          <div v-if = "isRight" class = "collapse" style = "padding-bottom: 20px">
            <a-collapse :activeKey = "activeKey" @change = "onChange">
                <a-collapse-panel :key="index" :header="item.companyName" v-for = "(item,index) in monitorList">
                  <template v-for="(_item,_index) in MonitorList[index]">
                    <div v-if="selectMonitorId === _item.id" @click="onClick(_item)"
                         class="monitor_class monitor_class_action">{{ _item.monitorName }}
                    </div>
                    <div v-else @click="onClick(_item,_index)" class="monitor_class">{{ _item.monitorName }}</div>
                  </template>
                </a-collapse-panel>
            </a-collapse>
          </div>
          <div id = "right-box">
            <div @click = "rightUp(true)" style = "cursor: pointer;">
              <img style = "position: relative;right: -80px;" src = "@/assets/big/nav_up.png" alt = ""></div>
            <ul ref = "wrapper">
              <template v-for = "(item,index) in plantList">
                <li @click = "onSelect(item,index)" v-if = "selectId === item.id" class = "onSelect" :key = "index">
                  {{ item.name }}
                </li>
                <li @click = "onSelect(item,index)" v-else :key = "index">{{ item.name }}</li>
              </template>

            </ul>
            <div @click = "rightUp(false)" style = "cursor: pointer;">
              <img style = "position: relative;right: -80px;" src = "@/assets/big/nav_down.png" alt = ""></div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {AMapManager, lazyAMapApiLoaderInstance} from "vue-amap";

let amapManager = new AMapManager();
import Gauge from "./components/gauge";
import Gauge1 from "./components/gauge1";
import Gauge2 from "./components/gauge2";
import Lines from "./components/line";
import lineCate from "./components/lineCate";
import lineBar from "./components/lineBar";
import moment from 'moment'
import cookies from "@/libs/cookies";

export default {
  name: "bigScreenS",
  components: {
    Gauge,
    Gauge1,
    Gauge2,
    Lines,
    lineCate,
    lineBar
  },
  data() {
    let _that = this;
    return {
      selectMonitorId: 0,
      MonitorList: [],
      activeKey: [0],
      isLeft: false,
      isBtnRight: false,
      isBtnLeft: false,
      isRight: false,
      isRightWidthDefault: 0,
      isRightWidth: '490px',
      isRightDefault: '130px',
      isEquipmentInfo: false,
      details: {}, //  选中的数据对象
      clickedMarker: "", // 已选中的点标记
      isinfoWindow: false, //  是否显示窗口
      district: "",
      amapManager,
      mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
      zoom: 10,
      map: "",
      center: [118.4643, 32.0238],
      isMonitoring: false,
      mouseTool: [],
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            _that.initPage();
          });
        },
      },
      SOC: 'CHN',
      colors: {},
      plantList: [],
      selectId: 0,
      areaList: this.$role,
      selectRoleId: this.$role.id,
      selectCompany: {},
      monitorList: [],
      mileageDay: {},
      equipmentAbnormal: {
        a: false,
        n: 0,
        b: 0,
        d: 0
      },
      recentDataStatistics: {
        date: [],
        count: [],
        error: []
      },
      isRecentDataStatistics: false,
      isQuantumPo: false,
      quantumPo: {
        done: 0,
        doneProportion: 0,
        notDone: 0,
        notDoneProportion: 0
      },
      markerList: [],
      allList: [],
      monitorStatus: 0,
      handleCount: {
        isShow:false,
      },
      errorList:new Map().set('N',{name:'N',code:'正常',count:0,color:'#2e9888'})
          .set('E',{name:'M',code:'超标',count:0,color:'#be3636'})
          .set('D',{name:'D',code:'故障',count:0,color:'#aa4a23'})
          .set('F',{name:'F',code:'停运',count:0,color:'#646262'})
          .set('B',{name:'B',code:'中断',count:0,color:'#b67a2c'})
    }
  },
  mounted() {
    this.getCompany();
    this.getMileage();
    this.getEquipmentNumber();
    this.getRecentDataStatistics();
    this.getQuantumPo();
    this.getMonitorStatusCount();
    this.getHandleCount();
    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,
      anchor: "middle-left",
      offset: new AMap.Pixel(40, -10),
    });
  },
  methods: {
    // 退出
    onOut() {
      let _that = this;
      this.$confirm({
        title: "是否确认退出",
        onOk() {
          cookies.remove("userInfo");
          _that.$router.push("/login");
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    //初始化地图
    initPage() {
      let that = this;
      this.map = this.amapManager.getMap();
      this.map.plugin(["AMap.MouseTool", "AMap.MarkerClusterer"], async () => {
        this.mouseTool = new AMap.MouseTool(this.map);
        await this.getAllMonitorList();
        let count = this.markerList.length;
        let _renderClusterMarker = function (context) {
          var factor = Math.pow(context.count / count, 1 / 18);
          var div = document.createElement('div');
          var Hue = 180 - factor * 180;
          var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
          var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
          var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
          div.style.backgroundColor = bgColor;
          var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
          div.style.width = div.style.height = size + 'px';
          div.style.border = 'solid 1px ' + borderColor;
          div.style.borderRadius = size / 2 + 'px';
          div.style.boxShadow = '0 0 1px ' + shadowColor;
          div.innerHTML = context.count;
          div.style.lineHeight = size + 'px';
          div.style.color = fontColor;
          div.style.fontSize = '20px';
          div.style.textAlign = 'center';
          context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
          context.marker.setContent(div)
        };
        this.district = new AMap.MarkerClusterer(this.map, this.markerList, {
          gridSize: 80,
          minClusterSize: 1,
          renderClusterMarker: _renderClusterMarker
        });
        //this.openMap();
      });
    },
    async getAllMonitorList() {
      this.markerList = [];
      await this.$api.getAllMonitorList().then(res => {
        if (res.data.code == 0) {
          if (res.data.data && res.data.data.length != 0) {
            let data = res.data.data
            data.forEach(item => {
              if (item.x == ''||item.x==" ") {
                return
              }
              this.markerList.push(new AMap.Marker({
                position: new AMap.LngLat(parseFloat(item.x), parseFloat(item.y)),
                content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
                offset: new AMap.Pixel(-15, -15)
              }))
            })
            //this.allList
          }
        }
      })
    },

    CompanyFindCompanyByPointId() {
      this.$api.CompanyFindCompanyByPointId(this.selectId).then(res => {
        if (res.data.code == 0) {
          if (res.data.data && res.data.data.length != 0) {
            this.monitorList = res.data.data
            console.log(this.monitorList)
            this.getMonitorList(this.monitorList[0].id, 0);
            this.setMapAll(this.monitorList, false)
          } else {
            this.map.remove(this.markerList);
            this.markerList = [];
            this.monitorList = [];
          }
        }
      })
    },
    getCompany() {
      this.$api.getAreaInfoByLevelList().then(res => {
        if (res.data.code == 0) {
          if (res.data.data.length != 0) {
            this.plantList = res.data.data;
            //this.selectId=this.plantList[0].id
          }
        }
      });
    },
    toRouter(e) {
      console.log(this.$menu.get('/'+e));

      if(e==="index"){
        this.$router.push(e);
        return
      }
      if(this.$menu.has('/'+e)){
        this.$router.push('/'+e);
      }else{
        this.$message.info("没有权限进入!");
      }
    },

    getMonitorStatusCount() {
      this.$api.getMonitorStatusCount().then(res => {
        if (res.data.code == 0) {
          let count=0
          res.data.data.forEach(item=>{
            count+=parseInt(item.count)
            if(this.errorList.has(item.status)){
              let error=this.errorList.get(item.status)
              error.count=item.count
              this.errorList.set(item.status,error)
            }
          })
          this.monitorStatus = count
        }
      })
    },
    getHandleCount() {
      this.$api.getHandleCount().then(res => {
        let data=[]

        let count=0
        if (res.data.code == 0) {
          res.data.data.forEach(item=>{
            count+=parseInt(item.count)
            let name="污染源"
            let color='#37ddc0'
            if(item.monitorType==1){
              name='污染源'
              color='#37ddc0'
            }
            if(item.monitorType==2){
              name='水站'
              color='#3fdec2'
            }
            if(item.monitorType==3){
              name='空气站'
              color='#4adec4'
            }
            data.push({
              name:name,
              count:item.count,
              color:color
            })
          })
          this.handleCount = {
            count:count,
            list:data,
            isShow: true
          }
        }
      })
    },
    onRight() {
      this.isBtnRight = !this.isBtnRight
      if (this.isBtnRight) {
        if (this.isRight) {
          this.isRightWidthDefault = this.isRightWidth
        } else {
          this.isRightWidthDefault = this.isRightDefault
        }
        this.isRightWidth = 0
      } else {
        this.isRightWidth = this.isRightWidthDefault
      }
    },
    onLeft() {
      this.isBtnLeft = !this.isBtnLeft
    },
    rightUp(type) {
      let _height = this.$refs.wrapper.scrollTop;
      if (type) {
        _height = _height - 45;
      } else {
        _height = _height + 45;
      }
      console.log(_height)
      this.$refs.wrapper.scrollTop = _height
    },
    onSelect(item, index) {

      this.isRightDefault = '490px'
      this.isRight = true;
      // this.district.clearMarkers();
      this.selectId = item.id
      this.selectCompany = item
      this.closeInfoWindow()
      this.CompanyFindCompanyByPointId();

    },
    onClick(item, index) {
      console.log(item)
      this.selectMonitorId = item.id
      item.modifyTime = moment(parseInt(item.modifyTime)).format('YYYY-MM-DD HH:mm:ss')
      this.details = item
      this.getFindMonitorDataByMn(item.monitorCode)

    },
    onChange(key) {
      let _key = key[key.length - 1];
      _key = parseInt(_key)
      if (!this.monitorList.MonitorList) {
        this.getMonitorList(this.monitorList[_key].id, _key)
      }
    },
    getMonitorList(companyId, index) {
      this.$api.getMonitorLists({
        current: 1,
        size: 1000,
        companyId: companyId
      }).then(res => {
        console.log(res.data.data)
        if (res.data.code == 0) {
          this.$set(this.MonitorList, index, res.data.data);
          // this.MonitorList[index] = res.data.data;
          this.onClick(this.MonitorList[index][0], 0);
          this.setMapAll(this.MonitorList[index], true);
          this.$forceUpdate()

        }
      })
    },
    getFindMonitorDataByMn(mn) {
      this.$api.getFindMonitorDataByMn(mn).then(res => {
        console.log(res.data.data)
        this.details.equipmentAbnormalInfoList = res.data.data.monitorFactorsPos
        this.openinfoWindow(res.data.data)
        this.$forceUpdate()
      })
    },
    setMapAll(dataList, isTo) {
      this.map.remove(this.markerList);
      this.markerList = [];
      dataList.forEach(item => {
        let center = new AMap.LngLat(item.x, item.y)
        let circleMarker = new AMap.CircleMarker({
          center: center,
          radius: 10,//3D视图下，CircleMarker半径不要超过64px
          strokeColor: 'rgba(27,171,112,1)',
          strokeWeight: 8,
          fillColor: 'rgba(255,235,59,0.8)',
          zIndex: 10,
          bubble: true,
          cursor: 'pointer',
          clickable: true
        })
        AMap.event.addListener(circleMarker, "click", (e) => {
          this.selectFn(item);
          this.openinfoWindow(item);
          this.clickedMarker = e.target;
        });
        circleMarker.setMap(this.map)
        this.markerList.push(circleMarker)
        if (isTo) {
          this.map.setFitView(this.markerList);
          this.openinfoWindow(item);
        }
      })

    },
    getEquipmentNumber() {
      return ;
      this.$api.getEquipmentStatusList().then(res => {
        console.log(res)
        if (res.data.code == 0) {
          let count = 0;
          let _n = 0;
          let _b = 0;
          let _d = 0;
          res.data.data.forEach(item => {
            count += parseInt(item.count)
            if (item.status == 'N') {
              _n = parseInt(item.count)
            }
            if (item.status == 'B') {
              _b = parseInt(item.count)
            }
            if (item.status == 'D') {
              _d = parseInt(item.count)
            }
          })
          this.equipmentAbnormal.n = parseInt((_n / count) * 100)
          this.equipmentAbnormal.b = parseInt((_b / count) * 100)
          this.equipmentAbnormal.d = parseInt((_d / count) * 100)
          this.equipmentAbnormal.a = true
        }
      })
    },
    getRecentDataStatistics() {
      this.$api.getRecentDataStatistics().then(res => {
        console.log(res)
        if (res.data.code == 0) {

          let _item = {
            date: [],
            count: [],
            error: []
          };
          if (res.data.data[0]) {
            res.data.data.forEach(item => {
              _item.date.push(item.datetime)
              _item.count.push(item.processedCount)
              _item.error.push(item.untreatedCount)
            })
          }

          this.recentDataStatistics = _item;
          this.isRecentDataStatistics = true;

        }
      })
    },
    getQuantumPo() {
      this.$api.getQuantumPo({organizationId: this.selectRoleId}).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          let todayDone = 0;
          let todayNotDone = 0;
          todayDone = res.data.data.todayDone;
          todayNotDone = res.data.data.todayNotDone;
          let sum = parseInt(todayDone) + parseInt(todayNotDone);
          let doneProportion = 0;
          let notDoneProportion = 0;
          if (sum != 0) {
            doneProportion = parseInt((todayDone / sum) * 100)
            notDoneProportion = 100 - doneProportion
          }
          this.quantumPo = {
            done: todayDone,
            doneProportion: doneProportion,
            notDone: todayNotDone,
            notDoneProportion: notDoneProportion
          }
          this.isQuantumPo = true;
        }
      })
    },
    getMileage() {
      console.log(this.selectRoleId)
      this.$api.getMileageDay(this.selectRoleId).then(res => {
        // console.log(res)
        let data = {
          currentDayMileage: res.data.data.currentDayMileage,
          yesterdayMileage: res.data.data.yesterdayMileage,
          currentMonthMileage: res.data.data.currentMonthMileage,
          lastMonthMileage: res.data.data.lastMonthMileage,
          day: Math.round(res.data.data.currentDayComparedYesterday * 100),
          month: Math.round(res.data.data.currentMonthComparedLastMonth * 100),
        };
        console.log(data)
        this.mileageDay = data
      })
    },
    // 点击设备方法
    selectFn(data) {
      console.log(data)
      this.openinfoWindow(data);
      this.details = data;
    },
    // 创建标签方法
    createInfoWindow() {
      this.isinfoWindow = true;
      return this.$refs.infoWindow;
    },
    // 打开标签方法
    openinfoWindow(data) {
      var position = new AMap.LngLat(data.x, data.y);
      this.map.panTo(position);
      this.infoWindow.setContent(this.createInfoWindow());
      this.infoWindow.open(this.map, position);
    },
    // 关闭窗口方法
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
  }

}
</script>

<style lang = "scss" scoped>
.out{
  width: 20px;
  position: absolute;
  z-index: 20;
  right: 16px;
  top: 20%;
  cursor: pointer;
}

.monitor_class_action {
  font-size: 16px;
  color: #37ddc0 !important;
}

.monitor_class {
  margin: 0px 0px 16px 25px;
  cursor: pointer;
  color: #fff;
}

.monitor_class:last-child {
  margin-bottom: 0px;
}

.btn_left {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 45%;
  right: -50px;
  color: white;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  box-shadow: rgb(0, 0, 0) -2px 2px 5px;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.2);
}

.btn_right {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 45%;
  left: -50px;
  color: white;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  box-shadow: rgb(0, 0, 0) -2px 2px 5px;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.2);
}

.widow-box {
  width: 350px;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(18, 90, 48, 0.801);
  position: relative;

  .guanbiicon {
    color: #10a98e;
    font-size: 24px;
    float: right;
    // position: absolute;
    // right: 20px;
    // top: 20px;
  }

  .single {
    width: 100%;
    height: auto;
    display: flex;
    color: #fff;

    .single-title {
      width: 35%;
      // text-align: right;
    }

    .single-cent {
      width: 65%;
    }
  }
}

.collapse {
  width: 320px;
  margin-left: 10px;
  height: 100%;
  overflow: overlay;
  background: #112a2b;
}

.collapse::-webkit-scrollbar {
  position: absolute;
  width: 8px;
  height: 10px;
}

.collapse::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px #207064;
  background: #207064;
}

.collapse::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px #2b4341;
  border-radius: 10px;
  background: #2b4341;
}

html, body, .map {
  width: 100%;
  background: transparent !important;
  height: 100%;
  margin: 0px;
}

.big_bg {
  background-image: url("~@/assets/big/bg.png");
  background: #112a2a;
  height: 100%;
  width: 100%;
}

.main {
  display: flex;
}

.head_top {
  background: url("~@/assets/big/head_top.png")no-repeat center center;
  height: 118px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.map {
  width: 100%;
  height: 100%;
}

.nav {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  display: flex;
  top: 110px;
  z-index: 10;
}

.nav .nav_left {
  background-image: url("~@/assets/big/nav_left.png");
  width: 164px;
  height: 29px;
  text-align: center;
  color: #37ddc0;
  font-size: 16px;
  font-weight: bold;
  line-height: 29px;
  margin-left: -20px;
  cursor: pointer;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.nav .nav_right {
  background-image: url("~@/assets/big/nav_right.png");
  width: 164px;
  height: 29px;
  text-align: center;
  color: #37ddc0;
  font-size: 16px;
  font-weight: bold;
  line-height: 29px;
  margin-right: -20px;
  cursor: pointer;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.nav .nav_jiange_left {
  margin-right: 15px;
}

.nav .nav_jiange_right {
  margin-left: 15px;
}

.nav .nav_top {
  position: absolute;
  padding-top: 35px;
  left: 15px;
  z-index: 2;
}

.nav .nav_top div {
  color: #37ddc0;
  height: 29px;
  width: 125px;
  font-size: 14px;
  line-height: 29px;
  background-color: #207064;
  margin-bottom: 5px;
  text-align: center;
  cursor: pointer;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left {
  left: 40px;
  bottom: 0;
  top: 30px;
  width: 440px;
  position: absolute;
  z-index: 1;
}

.main_left .top_1 {
  display: flex;
  margin-top: 3%;
}

.main_left .top_1 .day_box, .main_left .top_1 .area_box {
  width: 45%;
  position: relative;
  color: #bebebe;
}

.main_left .top_1 .area_box {
  margin-left: 10%;
}

.main_left .top_1 .day_box .arrows, .main_left .top_1 .area_box .arrows {
  background-image: url("~@/assets/big/jiantou.png");
  width: 13px;
  height: 8px;
  position: absolute;
  top: 15px;
}

.main_left .top_1 .day_box .sb_title, .main_left .top_1 .area_box .sb_title {
  display: block;
  width: 100%;
  background: url("~@/assets/big/duan.png") no-repeat left bottom;
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_1 .day_box .sb_title b, .main_left .top_1 .area_box .sb_title b {
  color: #37ddc0;
  font-weight: normal;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_1 .sb_number {
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
  color: #37ddc0;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_1 .sb_number h3 {
  font-size: 64px;
  color: #37ddc0;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_1 .sb_number b {
  position: absolute;
  font-size: 16px;
  color: #37ddc0;
  bottom: 20px;
  right: 10px;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_2 {
  margin-top: 3%;
}

.main_left .top_2 .day_box {
  width: 100%;
  position: relative;
  color: #bebebe;

}

.main_left .top_2 .day_box .arrows {
  background-image: url("~@/assets/big/jiantou.png");
  width: 13px;
  height: 8px;
  position: absolute;
  top: 15px;
}

.main_left .top_2 .day_box .sb_title {
  display: block;
  width: 100%;
  background: url("~@/assets/big/chang.png") no-repeat left bottom;
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_2 .day_box .sb_title b {
  color: #37ddc0;
  font-weight: normal;
}

.main_left .top_3 {
  margin-top: 2%;
}

.main_left .top_3 .day_box {
  width: 100%;
  position: relative;
  color: #bebebe;

}

.main_left .top_3 .day_box .arrows {
  background-image: url("~@/assets/big/jiantou.png");
  width: 13px;
  height: 8px;
  position: absolute;
  top: 15px;
}

.main_left .top_3 .day_box .sb_title {
  display: block;
  width: 100%;
  background: url("~@/assets/big/chang.png") no-repeat left bottom;
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  text-shadow: -1px 0 black, 0 1px black,
  1px 0 black, 0 -1px black
}

.main_left .top_3 .day_box .sb_title b {
  color: #37ddc0;
  font-weight: normal;
}

.yj_tx {
  margin-top: 20px;
  position: relative;
  display: flex;
  color: #bebebe;
}

.yj_tx span {
  width: 150px;
  text-align: center;
}

.div_progress {
  margin-top: 20px;
  position: relative;
}

::v-deep .ant-progress-inner {
  background-color: #244d51;
  border-radius: 10px;
}

::v-deep .ant-progress-bg::after {
  content: '';
  background: url("~@/assets/big/lll.png");
  position: absolute;
  right: 0;
  height: 80px;
  width: 2px;
}

::v-deep .ant-progress-bg {
  height: 80px !important;
}

::v-deep .ant-progress-show-info .ant-progress-outer {
  padding-right: 0;
}

.progress-text-box {
  height: 80px;
  position: absolute;
  width: 100%;
  top: 0;
}

.progress-left {
  position: absolute;
  display: grid;
  height: 80px;
  left: 10px;
}

.progress-right {
  position: absolute;
  height: 80px;
  display: grid;
  text-align: right;
  right: 10px;
}

.progress-left h3 {
  color: #4cc9c5;
  font-size: 32px;
  font-weight: bolder;
  height: 40px;
  line-height: 30px;
}

.progress-left span {
  color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.progress-right h3 {
  color: #258cd7;
  font-size: 32px;
  font-weight: bolder;
  height: 40px;
  line-height: 30px;
}

.progress-right span {
  color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.line-cate {
  margin-top: 2%;
  position: relative;
}

.line-cate-box {
  position: absolute;
  right: 0;
  top: 25px;
  width: 200px;
}

.line-cate-box div {

  font-size: 30px;
}

.line-cate-box div span {
  color: #3787c4;
}

.line-cate-box .line-color-down, .line-cate-box .line-color-up {
  margin-left: 10px;
}

.line-cate-box .line-color-down {
  color: #d06551
}

.line-cate-box .line-color-up {

  color: #0cd4b0
}


.main_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}


.main_right {
  position: absolute;
  top: 30px;
  right: 0;
  width: 100%;
  bottom: 0;
  z-index: 1;
}

#right-box {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

#right-box ul {
  width: 150px;
  overflow-y: hidden;
  height: 90%;
  position: relative;
}

#right-box li {
  background: url("~@/assets/big/right1.png");
  height: 40px;
  line-height: 40px;
  width: 120px;
  margin-top: 5px;
  color: #37ddc0;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  right: -29px;
}

::v-deep .onSelect {
  background: url("~@/assets/big/right2.png") !important;
  height: 56px !important;
  line-height: 56px !important;
  width: 150px !important;
  color: #3bbda5 !important;
  position: relative !important;
  right: 0 !important;

}

#right_title {
  /*position: absolute;*/
  font-size: 40px;
  font-weight: bolder;
  color: #3cbca5;
  padding-left: 12%;
}

#right_title_area {
  position: absolute;
  top: 70px;
  left: 20px;
}

#right_title_area .arrows {
  position: absolute;
  background-image: url("~@/assets/big/jiantou.png");
  width: 13px;
  height: 8px;
  top: 15px;
  left: -20px;
}

#right_title_area .area_title {
  font-size: 24px;
  color: #30b3c5;
  display: flex;
}

#right_title_area .area_title_auxiliary {
  color: #898a8e;
  font-size: 18px;
  margin-left: 5px;
  line-height: 40px;
}

.area_smoke {
  position: absolute;
  top: 120px;
  left: -30px;
}


.smoke_list {
  position: absolute;
  left: 130px;
  top: 0;
}

.smoke_list_detail > div {
  overflow: hidden;
  width: 200px;
  height: 30px;
  display: flex;
  margin-top: 5px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.smoke_list_detail > div div {
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  overflow: hidden;

}

.smoke_list_detail .dl_name {
  width: 110px;
  background: rgba(0, 0, 0, 0.2);
}

.smoke_list_detail > div div {
  color: #878b8a
}

.smoke_list_detail > div div:last-child {
  color: #48b0bd
}

#smoke_ts {
  position: relative;
  left: 5px;
}

#air {
  top: 270px;

}

#water {
  top: 420px;

}

::v-deep .amap-logo {
  display: none !important;
}

.roll-box {
  width: 100%;
  height: 90%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .list-box {
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 24px;

    .left-img {
      width: 30%;

      div {
        color: #3cbecc;
        bottom: 22px;
        width: 112px;
        text-align: center;
        font-size: 18px;
      }
    }

    .right-text {
      width: 56%;

      .warning-type {
        width: 100%;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        border-radius: 10px;
        overflow: hidden;
        text-align: center;

        div:first-child {
          width: 56%;
          color: rgba(255, 255, 255, 0.5);
          background: rgba(0, 0, 0, 0.5);
          overflow: hidden;
        }

        div:last-child {
          width: 44%;
          color: #48b0bd;
        }
      }
    }
  }
}
::v-deep .ant-collapse {
  background: transparent;
  color: #fff;
  border:1px solid #207064;
  .ant-collapse-content{
    background: transparent;
    border-top: 1px solid #207064;
  }
  .ant-collapse-item{
    border-bottom: 1px solid #207064;
    .ant-collapse-header {
      font-size: 16px;
      background: transparent;
      color: #fff;
    }
  }
  .ant-popover-inner {
    background-color: #112a2b;
    box-shadow: rgb(0, 0, 0) 2px 2px 5px;
  }
  .ant-popover-title{
    color: #bebebe;
    font-size: 16px;
    border-bottom: 1px solid #207064;
  }
  .ant-popover-inner-content{
    color: #bebebe;
    font-size: 16px;
  }
}



</style>
<style>
.ant-popover-title{
  font-size: 18px;font-weight: bold
}


</style>
